<template>

<div class="IndexWrapper">
  <div class="topWrapper">
    <div class="title">宠物医院门诊管理系统</div>
    <div class="index_avatar_wrapper" >
      <div class="index_avatar_inner">
        <div class="index_avatar"> 
          <img :src="avatar" @click="changeAvatar" alt="" class = "gl_img">
        </div>
        <div class="doc_name">{{name}}</div>
        <div class="change" @click="change()">切换用户</div>
      </div>
      
    </div>
  </div>

  <input type="file" class="file_avatar" ref="file_avatar" @change="avatarFileGet" hidden>

  <div class="body_wrapper" >
    <div class="left" :style="{'display': show?'block':'none'}">
      
      <LeftNav></LeftNav> 
    </div>
    <!-- <div class="btn" @click="()=>{this.show=!this.show}"></div> -->
    <div class="right" style="box-shadow: 0 0 0px red;">
      <div class="nav_title">
        <!-- <el-page-header  content="详情页面"></el-page-header> -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item><span class="nav_title_text_1">宠物医院门诊管理系统</span></el-breadcrumb-item>
          <el-breadcrumb-item><span class="nav_title_text_2">{{nav_title}}</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="right_inner">
        <router-view></router-view>
      </div>
      
    </div>
    <!-- <div class="right">
      <router-view ></router-view>
    </div> -->
  </div>
  
</div>
</template>

<script>
import LeftNav from '../components/LeftNav'
import { mapGetters, mapState } from 'vuex'
import { myPost, myPostBody, uploadFileRequest } from '../utils/api'
export default {
  name: '首页',
  data(){
    return {
      show: true, 
      avatar: '', 
      name: ''
    }
  },
    computed:{
    ...mapState(['nav_title']),
    ...mapGetters({asd:'inc_inc'})
  }, 
  methods: {
    change(){
      this.$router.push({path: '/login'})
      location.reload();
    },
    changeAvatar(){
      // var file = document.getElementsByClassName('file_avatar')
      this.$refs.file_avatar.dispatchEvent(new MouseEvent('click')) 
    },
    avatarFileGet(e){
      console.debug('avatarFile', e)
      var file = e.target.files[0]
      console.debug('file', file)
	    var forms = new FormData()
      forms.append('file', file)
      uploadFileRequest('/upload/file', forms).then(res => {
        // this.$message({showClose: true, methods: res.data.url, type: 'success'})
        console.debug('upload res', res)
        myPostBody('/doctor/change/avatar', {url: res.data.url, docId: window.localStorage.getItem('doctor_id')}).then(res1 => {
          if(res1.data.code == 0){
            this.$message({showClose: true, message: '修改头像成功',  type: 'success'})
            this.avatar = res.data.url
          }else{
            this.$message({showClose: true, message: '修改头像失败',  type: 'error'})
          }
        }).catch(err1 => {
          this.$message({showClose: true, message: '修改头像失败',  type: 'error'})
        })
      }).catch(err => {
        this.$message({showClose: true, methods: JSON.stringify(err), type: 'error'})
      })


    }
  },

  mounted(){
    var sto = window.localStorage
    this.avatar = sto.getItem("doctor_avatar")
    this.name = sto.getItem("realname")
  },
  components: {
    LeftNav, 
  }
}
</script>


<style scope>

.change{
  color: rgb(19, 27, 105);
  margin: auto auto;
  text-decoration: underline;
  cursor: pointer;
}
.doc_name{
  margin: auto auto;
  color: beige;
  font-weight: bold;
}
.index_avatar_wrapper{
  width: 100%;
  /* background-color: white; */
  position: relative;
}
.index_avatar_inner{
  width: 180px;
  height: 50px;
  margin: 50px auto;
  /* box-shadow: aquamarine 0 0 5px; */
  display: flex;
}
.index_avatar{
  margin: auto auto;
  width: 35px;
  height: 35px;
}
.index_avatar img{ border-radius: 50%;
}


.btn{
  width: 10px;
  height: 50px;
  background-color: blue;
  position: absolute;
  right: 0px;
  top: 200px;
  z-index: 10;
}

.IndexWrapper{
  border: 0px solid blue;
  display: flex;
  flex-direction: column;
}
.body_wrapper{
  flex: 1;
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.left{
  width: 10%;
  border: 0px solid red;
  min-height: 100% !important;
  background-color: #545c64;
  border-right: 0px solid white;
  min-width: 150px;
}
.topWrapper{
  width: 100%;
  height: 100px;
  background-color: antiquewhite;
  background: url(https://2115748.oss-cn-beijing.aliyuncs.com/his/src%3Dhttp___pic1.win4000.com_wallpaper_d_589eb097749f1.jpg%26refer%3Dhttp___pic1.win4000.jpg) no-repeat;
  background-size: 100% 100%;
}
.right{
  flex: 1;
  /* width: 100%; */
  height: 100%;

  border: solid 0px red;
  /* background-color: rgb(243, 227, 227); */
}

.right_inner{
  margin: 2%;
  width: 96%;
  border-radius: 7px;
  box-shadow: rgb(196, 188, 188) 0 0 10px;
  /* overflow-x: scroll; */
}
.nav_title_text_1{
  color: rgb(81, 88, 73);
  font-size: 15px;
}
.nav_title_text_2{
  color: rgb(81, 88, 73);
  font-size: 15px;
  font-weight: 600;
  color: brown;
}
.nav_title{
  margin: 2%;box-shadow: 0 0 0px  red;
}
.title{
  box-shadow: 0 0 0px  red;float: left;
  width: 100%;font-size: 35px;font-weight: bold;color: rgb(106, 112, 112);
}
</style>